<template>
    <el-dropdown trigger="click" @command="handleCommand">
        <div class="p-2 flex items-center cursor-pointer rounded-md bg-transparent hover:bg-[var(--el-fill-color-light)]">
            <el-icon :size="18">
                <User/>
            </el-icon>
            <span class="ml-1">管理员</span>
        </div>
        <template #dropdown>
            <el-dropdown-menu>
                <el-dropdown-item command="个人中心">个人中心</el-dropdown-item>
                <el-dropdown-item command="退出登录">退出登录</el-dropdown-item>
            </el-dropdown-menu>
        </template>
    </el-dropdown>
</template>
<script setup>
import {User} from '@element-plus/icons-vue'
import {useUserStore} from "@/stores/user.js";
import {useRouter} from "vue-router";

const router = useRouter();
const store = useUserStore();

const handleCommand = (command) => {
    if (command === '退出登录') {
        store.logout(router);
    }
}

</script>

<style scoped lang="less">

</style>